import React from 'react'
import {Modal,Form, Input, message,Select} from 'antd'
import{SmileOutlined } from '@ant-design/icons';
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
import currentDate from '../../../common/CurrentDate.js'
import { addRoleActionAsync } from '../../../redux/action/roleAction';
const { Option } = Select;
function AddRole(props) {
  const handleSubmit=async ()=>{
    try{
      const fieldsValue = await RoleAddForm.validateFields()
      fieldsValue.status=Number(fieldsValue.status)
      fieldsValue.key=Date.now()+''
      fieldsValue.submitTime=currentDate()
      props.addRoleActionAsync(fieldsValue)
      RoleAddForm.resetFields()
      props.close()
      message.success('添加成功!')
    }
    catch{
      message.error('添加失败!')
    }
  }
  const [RoleAddForm]=Form.useForm()
  return (
    <Modal
      title="添加用户信息"
      okText='添加'
      cancelText='取消'
      visible={props.visible}
      onCancel={()=>{
        RoleAddForm.resetFields()
        props.close()
        }}
      onOk={handleSubmit}
    >
      <Form
        layout="horizontal"
        form={RoleAddForm}
        name="RoleAddForm"
      >
        <Form.Item
            name="name"
            label="角色名"
            rules={[
              {
                pattern:/^.+$/,
                message: '请输入字符!',
              },
              {
                required: true,
                message: '请输入角色名!',
              },
            ]}
          >
            <Input prefix={<SmileOutlined />} placeholder='角色名'/>
        </Form.Item>
        <Form.Item
            name="status"
            label="状态码"
            rules={[
              {
                required: true,
              },
            ]}
            initialValue={1}
          >
          <Select style={{ width: '30%' }}>
            <Option value={1}>启用</Option>
            <Option value={0}>禁用</Option>
          </Select>
        </Form.Item>
        <Form.Item
            name="des"
            label="描述语"
            rules={[
              {
                pattern:/^.+$/,
                message: '请输入字符!',
              },
              {
                required: true,
                message: '请输入描述!',
              },
            ]}
          >
            <Input.TextArea />
        </Form.Item>
      </Form>
    </Modal>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    roleList:state.roleList
	}),
	{addRoleActionAsync}
)(AddRole)
